<!--  -->
<template>
 <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    label-width="auto"
  >

  {{ formData }}

 
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formData.name"  />
    </el-form-item>

    <el-form-item label="头像" prop="name">

      <el-upload
    class="avatar-uploader"
    :action="baseURL+'/upload/add'"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :headers="headers"
  >
    <img v-if="formData.photo" :src="imgURL+formData.photo" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>

    </el-form-item>
 


    <el-form-item label="性别" prop="name">
        <el-radio-group v-model="formData.gender">
      <el-radio :value="1" size="large">男</el-radio>
      <el-radio :value="2" size="large">女</el-radio>
    </el-radio-group>

    </el-form-item>
    <el-form-item label="生日" prop="name">
        <el-date-picker
        v-model="formData.birthday"
        value-format="YYYY-MM-DD HH:mm"
        format="YYYY年M月D日"
        type="date"
        placeholder="请选择生日"
        
      />
    </el-form-item>
    </el-form>
</template>

<script lang='ts' setup>
import { inject } from 'vue';
import { reactive,toRefs,ref,onMounted} from 'vue'
import { Elderly } from '../../apis/elderly/type';
import { ElMessage, UploadProps } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { useAuthSotre } from '../../sotre/authStore';
import { CompressImage } from '../../utils/imageUtils';
const  store=useAuthSotre();
const baseURL=import.meta.env.VITE_BASE_URL;
const imgURL=import.meta.env.VITE_IMG_URL;
const formData= inject<Elderly>('formData')!

const headers = {
  Authorization:store.token
}

// const imageUrl = ref('')
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {


  formData.photo=response.data.url;
  console.log(111111111,response);
  
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {

 

  let types = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/bmp'];
  
  if (!types.includes(rawFile.type)) {
    ElMessage.error('图片必须是jpg、png、gif、webp，bmp')
    return false
  }else{

      //在这里压缩图片

   let url = URL.createObjectURL(rawFile);
   return CompressImage(url, 200);


  }
 
}

</script>
<style scoped>
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}

</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>